<template>
    <div class="Box">
        <VueMarkdown :source="HtmlMd"></VueMarkdown>

      <div>
        <mavon-editor
          v-model="content"
          ref="md"
          @change="change"
          style="min-height: 600px"
        />

        <!--<button @click="submit">提交</button>-->
      </div>
    </div>


</template>

<script>

// import ss from "../../static/MDFile/Demo.md"
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
    import VueMarkdown from 'vue-markdown'
    export default
    {
        name: "index",
        data(){
          return{
            HtmlMd:"",
            content:'', // 输入的markdown
            html:'',    // 及时转的html
          }
        },
        mounted(){
          console.log("展示md文件");
          this.$axios({
            method:"get",
            url:"../../static/MDFile/Demo.md"
          }).then((res)=>{
            this.HtmlMd = res.data;
          })
        },
      methods:{
        change(value, render){
          // render 为 markdown 解析后的结果[html]
          this.html = render;
        },
      },
        components: {
          VueMarkdown,
          mavonEditor,
        }
    }
</script>

<style scoped>

</style>
